<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ImageLayer, PointLayer, Scene } from '@antv/l7'
import { Map } from '@antv/l7-maps'
import { Popup } from '@antv/l7'
import { ref } from 'vue'
import { onMounted } from 'vue'
import { LabType,CollegeType } from '../../util/type'
import { url } from '../../util/urlconfig'
let scene
let popup
onMounted(()=>{
 scene = new Scene({
  id: 'map',
  map: new Map({
    center: [500, 500],
    zoom: 3,
    version: 'SIMPLE',
    mapSize: 1000,
    maxZoom: 5,
    minZoom: 2,
    pitchEnabled: false,
    rotateEnabled: false,
  }),
})
scene.setBgColor('rgb(94, 182, 140)')

const imagelayer = new ImageLayer({}).source(
  url,
  {
    parser: {
      type: 'image',
      extent: [360, 400, 640, 600],
    },
  },
)
imagelayer.on('click', (e) => {
  // console.log(e)
  let {lng,lat}=e.lngLat
   popup = new Popup({
    offsets: [0, 0],
    closeButton: false,
  })
    .setLnglat(e.lngLat)
    .setHTML(
      `<button class="el-button el-button--primary" onclick="add_popup(${lng},${lat})">选择位置</button>`,
    )
  scene.addPopup(popup)
})



scene.on('loaded', () => {
  getList()
  scene.addLayer(imagelayer)
})

})

const getList=async ()=>{
  const res= await axios.get('/adminapi/labs')
  // console.log(res)
  const list=res.data.map(item=>({
    x:item.x,
    y:item.y,
    t:item.title
  }))
  addTextLayer(list)
}

window.add_popup=(x,y)=>{
  // console.log(x,y)
  showLabDialog.value=true

  // 将prop隐藏
  popup.close()

  //x,y
  addLab.value.x=500+2.8*x
  addLab.value.y=500+2.8*y

      
}

const showLabDialog=ref(false)
const addLabRef=ref([])
const addLab=ref({
  title:'',
  capacity:'',
  lab_type:'',
  college_type:'',
  x:0,
  y:0
})
const ruleslab={
  title: [
    { required: true, message: '请输入实验室名称', trigger: 'blur' },
  ],
  capacity: [
    { required: true, message: '请输入容纳人数', trigger: 'blur' },
  ],
  lab_type: [
    { required: true, message: '请选择实验室类型', trigger: 'change' },
  ],
  college_type: [
    { required: true, message: '请选择学院', trigger: 'change' },
  ],
}
// 取消
const handleCancel=()=>{
  addLabRef.value.resetFields()
  showLabDialog.value=false
}

// 添加
const handeleAddBtn=()=>{
  addLabRef.value.validate(async isOk=>{
    if(isOk){


      // console.log(addUserList.value)
      // 发送请求
      await axios.post('/adminapi/labs',addLab.value)
      ElMessage.success('添加成功')


      // 添加文字标注
      addTextLayer( [
            {
              'x':addLab.value.x,
              'y': addLab.value.y,
              't': addLab.value.title, 
            }
          ])
      addLab.value={
        title:'',
        capacity:'',
        lab_type:'',
        college_type:''
        }
        // 重置表单
  addLabRef.value.resetFields()
      showLabDialog.value=false
     
    }
  })
}

const addTextLayer=(data)=>{
        const textlayer = new PointLayer({ zIndex: 2 })
        .source(
          data,{
          parser: {
            type: 'json',
            x: 'x',
            y: 'y',
          },
        })
        .shape('t', 'text')
        .size(16)
        .active({
          color: '#00f',
          mix: 0.9,
        })
        .color('rgb(13, 71, 161)')
        .style({
          textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
          spacing: 2, // 字符间距
          fontWeight: '800',
          padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
          stroke: '#ffffff', // 描边颜色
          strokeWidth: 2, // 描边宽度
          textAllowOverlap: true,
        })
      scene.addLayer(textlayer)
}
</script>

<template>
  <div>
    <div style="min-height: 100vh; justify-content: center;position: relative" id="map" />
    <!-- 添加用户弹框 -->
  <el-dialog
   @close="handleCancel"
    v-model="showLabDialog"
    title="添加实验室"
    width="500"
    align-center
  >
  <el-form
    ref="addLabRef"
    style="max-width: 1800px;"
    :model="addLab"
    status-icon
    :rules="ruleslab"
    label-width="100"
    class="demo-ruleForm"
  >
    <el-form-item label="实验室名称" prop="title">
      <el-input 
      v-model="addLab.title"
       type="text" 
        placeholder="请输入实验室名称"
        />
    </el-form-item>
    <el-form-item label="容纳人数" prop="capacity">
      <el-input 
      v-model="addLab.capacity"
       type="number" 
        placeholder="请输入容纳人数"
        />
    </el-form-item>
    <el-form-item label="实验室类型" prop="lab_type">
    <!-- 选择框组件 -->
    <el-select v-model="addLab.lab_type" placeholder="请选择实验室类型">
      <el-option
        v-for="item in LabType"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    </el-form-item>

    <el-form-item label="所属学院" prop="college_type">
    <!-- 选择框组件 -->
    <el-select v-model="addLab.college_type" placeholder="请选择学院">
      <el-option
        v-for="item in CollegeType"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    </el-form-item>
  </el-form>


    <template #footer >
      <div class="dialog-footer" >
        <el-button type="primary" @click="handeleAddBtn()">
          添加
        </el-button>
        <el-button @click="handleCancel()">取消</el-button>
       
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<style scoped>

</style>
